<template>
  <a-layout-sider v-show="!menuVisible" class="nav-box" :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]" width="296px" :collapsible="collapsible" :trigger="null">
    <a-layout-content class="user-menu">
      <AutoCad v-show="showContent" :menuId="menuId">
      </AutoCad>
      <MenuButton1 v-show="!showContent" @setRefreshMenu="setRefreshMenu">
      </MenuButton1>
    </a-layout-content>
    <div class="top-box">
      <div class="items">
        <div class="item1">
          <img src="../../assets/logo.png" height="61" width="193">
          <!-- 重庆市|规划和自然资源局 -->
          <a><a-icon
            class="trigger"
            style="margin-left: 24px"
            :type="menuVisible ? 'menu-unfold' : 'menu-fold'"
            @click.native="toggle"/></a>
        </div>
        <div class="item2">
          欢迎您，<a @click="userInfo">{{ nickname()}}</a>
          <a href="javascript:;" @click="handleLogout" class="logout">[退出登录]</a>
        </div>
        <div class="item3">
          {{nowTime | formatDate}}&nbsp;{{nowWeek}}
        </div>
        <div class="item4">
          <a-input-search placeholder="输入您要搜索的内容" style="width: 240px;" @search="onSearch" enterButton/>
        </div>
      </div>
      <a-tabs class='tabs' type="line" defaultActiveKey="1" @tabClick="callback">
        <a-tab-pane key="1" tab='常用功能'>
        </a-tab-pane>
        <a-tab-pane tab='应用导航' key="2" forceRender>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-layout-footer class="footer1">
      <a-divider />
      <a-row style="margin-left: 20px;text-align: left">
        <a-col :span="12" style="text-align: left">
          <a @click="showAddress()"><a-icon type="contacts" />&nbsp;通讯录</a>
          <addressList :visible="visible" @onVisibleChange="onVisibleChange"/>
        </a-col>
        <a-col :span="12">
          <a @click="open2035"><a-icon type="message" />&nbsp;2035即时通讯</a>
        </a-col>
      </a-row>
      <br/>
      <a-row style="margin-left: 20px;text-align: left" >
        <a-col :span="12">
          <a @click="showNew()"><a-icon type="edit" />&nbsp;意见反馈</a>
        </a-col>
        <a-col :span="12" style="text-align: left">
          <a @click="showModal()"><a-icon type="tool" />&nbsp;技术支持</a>
          <ModalButton ref="ModalButton"></ModalButton>
        </a-col>
      </a-row>
    </a-layout-footer>
  </a-layout-sider>
</template>
<script>
import ALayoutSider from "ant-design-vue/es/layout/Sider"
import Logo from '../tools/Logo'
import SMenu from './index'
import { mapActions,mapGetters } from 'vuex'
import MenuButton1 from '@/views/mapping/MenuButton1'
import AutoCad from '@/views/mapping/AutoCad'
import ModalButton from '@/views/mapping/ModalButton'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import {ACCESS_TOKEN,ACCESS_TOKEN_IP} from "@/store/mutation-types"
import Vue from 'vue'
import { openIFrame, triggerWindowResizeEvent } from '@/utils/util'
import AddressList from './Address'

const baseUrl = process.env.VUE_APP_ADD_HTTP

export default {
  name: "SideMenu",
  components: { ALayoutSider, Logo, SMenu, MenuButton1, AutoCad, ModalButton,AddressList },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menus: {
      type: Array,
      required: true
    },
    menuVisible:{
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      visible:false,
      showContent: true,
      nowTime: new Date(), // 当前时间
      nowWeek: '星期', //星期几
      menuId:""
    }
  },
  created(){
    this.nowWeek = this.nowWeek + "日一二三四五六".charAt(new Date().getDay())
  },
  filters:{
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      return y + '年' + MM + '月' + d + '日';
    }
  },
  methods: {
    showModal(){
      this.$refs.ModalButton.showModal();
    },
    open2035(){
      let url = "imwork://sendmsg/?startup=0&ssname=default";
      window.open(url, "_parent");
    },
    showAddress(){
      this.visible = true;
    },
    onVisibleChange(val){
      this.visible = val;
    },
    userInfo(){
      let ticket = Vue.ls.get(ACCESS_TOKEN)
      let UserIP = "&UserIP="+ Vue.ls.get(ACCESS_TOKEN_IP);
      let ReturnUrl = encodeURIComponent('/NModules/User/MySetting.html')
      let url = baseUrl + "/login.xip?LoginMethod=ssologin&Ticket=" + ticket + UserIP + "&ReturnUrl=" +ReturnUrl;
      openIFrame(ReturnUrl, '/' + ReturnUrl, '用户信息', url)
      this.$router.push({ name: ReturnUrl })
    },
    setRefreshMenu(menuId){
      this.menuId = menuId;
    },
    showNew(){
      let ticket = Vue.ls.get(ACCESS_TOKEN)
      let UserIP = "&UserIP="+ Vue.ls.get(ACCESS_TOKEN_IP);
      let ReturnUrl = encodeURIComponent('/Modules/Suggestion/list/index.htm#')
      let url = baseUrl + "/login.xip?LoginMethod=ssologin&Ticket=" + ticket + UserIP + "&ReturnUrl=" +ReturnUrl;
      openIFrame(ReturnUrl, '/' + ReturnUrl, '意见反馈', url)
      this.$router.push({ name: ReturnUrl })
    },
    ...mapActions(["Logout"]),
    ...mapGetters(["nickname"]),
    onSearch(value) {
      if(value){
        window.open(process.env.VUE_APP_ADD_HTTP +
          '/NModules/Search/Index.html?' +
          'ApiAddress=23.36.250.116:8030&' +
          'Server=平台业务聚合检索正式库' +
          '&key=' + value + '#')
      }else{
        //无输入时提示
        this.$message.warning('请输入搜索内容！');
      }
    },
    onSelect(obj) {
      this.$emit('menuSelect', obj)
    },
    handleClick(e) {
    },
    callback(key) {
      if (key == 1) {
        this.showContent = true;
      } else {
        this.showContent = false;
      }
    },
    handleLogout() {
      let that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          return that.Logout({}).then(() => {
            sessionStorage.setItem("DynamicRouters", JSON.stringify([]));
            window.location.href="/";
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            })
          })
        },
        onCancel() {
        },
      });
    },
    toggle(){
      this.$emit('toggle')
    }
  }
}
</script>
<style lang="less" scoped>
.logout{
  margin-left: 13px;
}

.top-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 296px;
  background-color: #fff;
  background:url("../../assets/bg.png") no-repeat;
  background-size: 100%;
}

.top-box .items {
  padding: 20px 0 0 20px;
}

.top-box .item2 {
  margin-top: 33px;
}

.top-box .item3 {
  margin-top: 12px;
}

.top-box .item4 {
  margin-top: 24px;
}

.top-box .ant-input-affix-wrapper .ant-input {
  border-radius: 40px;
}

.top-box .tabs {
  text-align: center;
  width: 296px;
}

.ant-layout-footer {
  padding: 24px 6px !important;
}
.ant-divider-horizontal {
  margin: 9px 0 20px 0 !important;
}
.footer1 {
  position: fixed;
  /*padding: 10px 50px 0;*/
  left: 0;
  bottom: 0px;
  width: 296px;
  background-color: #fff;
  text-align: center;
  .item2 {
    text-align: center;
    margin: -25px auto;
  }
}

.ant-tabs-bar {
  margin: 0 !important;
}

.footer1 .item1 {
  text-align: center;
  margin-bottom: 25px;
  position: relative;
  >a{
    padding: 0 15px;
  }
}
.footer1 .item1 li{
  height: 34px;
  line-height: 34px;
}

.footer1 .item1 li a{
  color:rgba(0, 0, 0, 0.65);
}

.footer1 .item1 li p.active_on{
   color:#83A7CF;
}
.footer1 .footerhr{
  height:1px;
  border:none;
  border-top:1px solid #EBEEF5;
  margin-bottom: 10px;
  position: relative;
  width: 296px;
  left:-6px;
}
.footer1 .footerhr2{
  height:1px;
  border:none;
  border-top:1px solid #EBEEF5;
  position: relative;
  width: 296px;
  left:-6px;
}
.nav-box .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  line-height: auto;
}

.user-menu {
  position: fixed;
  width: 296px;
  box-sizing: border-box;
  top: 290px;
  height: calc(100vh - 250px);
  overflow-x: hidden;
  overflow-y: auto;
}
.user-menu::-webkit-scrollbar {
  display: none;
}
</style>